import React from 'react';
import { useMediaQuery } from '../../hooks/useMediaQuery';
import { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';

export interface ShowProps {
  /**
   * 在指定断点显示
   */
  breakpoint?: Breakpoint | Breakpoint[];

  /**
   * 自定义媒体查询
   */
  when?: string;

  /**
   * 子元素
   */
  children: React.ReactNode;
}

/**
 * Show 组件
 * 在满足条件时显示子组件
 *
 * @example
 * <Show breakpoint="mobile">
 *   <MobileOnlyContent />
 * </Show>
 *
 * @example
 * <Show when="(min-width: 768px)">
 *   <TabletAndAbove />
 * </Show>
 */
export const Show: React.FC<ShowProps> = ({ breakpoint, when, children }) => {
  const currentBreakpoint = useBreakpoint();
  const customMatch = useMediaQuery(when || '');

  // 使用自定义媒体查询
  if (when) {
    return customMatch ? <>{children}</> : null;
  }

  // 使用断点
  if (breakpoint) {
    const breakpoints = Array.isArray(breakpoint) ? breakpoint : [breakpoint];
    const shouldShow = breakpoints.includes(currentBreakpoint);
    return shouldShow ? <>{children}</> : null;
  }

  // 默认显示
  return <>{children}</>;
};

Show.displayName = 'Show';
